<template>
	<view class="login-con">
		<view class="login-logo w100">
			<view class="fl-c mgt pdl mgl blod mgb">
				<view class="ptit mgb10">欢迎使用<text style="font-weight:600; padding-left: 8px;">新生报到引导小程序</text></view>
				<!-- <view class="desctit">停车有位，出行不愁</view> -->
			</view>
			<view class="logo fl-cc tc mgr">
				<image style="width:90%; height:100%;" src="/static/login-bg.png"></image>
			</view>
		</view>
		<view class="login-btn">
			<view class="btn-con fl-cc">
				<view class="mgb" style="width: 100%;">
					<!-- @getphonenumber="getPhoneNumber" -->
					<button class="wxbtn btn-primary" plain @tap="onLogin" style="border: none;">
						<view class="fl">
							<uni-icons type="weixin" size="18" color="#FFF"></uni-icons>
							<text class="mgl10">微信快捷登陆</text>
						</view>
					</button>
				</view>
				<view class="fl mgt">我已阅读并同意<text style="color: rgba(59, 144, 253, 1);">《用户协议》</text>和<text
						style="color: rgba(59, 144, 253, 1);">《隐私协议》</text></view>
			</view>
			<view class="pdtb10 fl-cc desc">中煤（西安）北斗科技有限公司</view>
		</view>
		<!--二次验证提醒toast-->
		<uni-toast ref="toast"></uni-toast>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		onMounted,
		nextTick,
		computed
	} from 'vue';
	import router from "@/ya/router/index.js";
	import LoginApi from '@/ya/api/login.js';
	import {
		toast
	} from '@/ya/helper/index.js';
	import {
		onBackPress
	} from "@dcloudio/uni-app"
	import {
		useStore
	} from '@/ya/store';
	// 登录方式
	const form = ref(null);
	const userInfo = reactive({
		phone: '',
		verificationCode: ''
	});
	const loginformitem = reactive({
		borderRadius: '5px',
		marginBottom: '30rpx',
		height: '50px !important',
		padding: '4px 8px 4px 4px',
		backgroundColor: '#FFF'
	});
	const userStore = useStore('user');
	const appConfigStore = useStore('appConfig');
	const settingConfig = computed(() => useStore('appConfig').settingConfig);
	const isEmptyStringOrNull = (value) => {
		return value === null || value === "" || value === undefined;
	}
	const loginBefore = () => {
		// 清空数据
		userStore.resetUserData();
		uni.removeStorageSync("token");
		messages.reverse();
		console.log("message:", messages)
		if (messages.length > 0) {
			messages.forEach(item => {
				toast.value.show({
					message: item,
					type: 'error'
				});
			})
			return false
		}
		return true
	};
	const getPhoneNumber = async (e) => {
		if (e.detail.errMsg !== 'getPhoneNumber:ok') {
			toast('快捷登录失败');
			return;
		}
		state.model.phoneCode = e.detail.code;
		OperatorApi.updateOperator(state.model).then(async response => {
			if (response.code === 0) {
				await getTabBarByUser();
				uni.redirectTo({
					url: '/pages/index'
				})
			} else {
				toast(response.msg);
			}
		});
	};
	const onLogin = async () => {
		console.log(router);
		router.switchTab("/pages/home/home");
		// if (!loginBefore()) {
		// 	return
		// }
		try {
			await userStore.login(tempUserInfo).then(async (res) => {
				console.log("res:", res)
				if (res) {
					if (userInfo.keepPsw) {
						uni.setStorageSync('userInfo', userInfo);
					} else {
						uni.removeStorageSync("userInfo");
					}
					console.log("stor-userInfo:", uni.getStorageSync("userInfo"));
					// 动态设置底部tab
					await appConfigStore.setTabsByRole(tempType, userStore
						.userType);
					console.log("userType:", cUserType.value)
					await appConfigStore.loginAfter();
				} else {
					toast.value.show({
						message: '登录失败！用户信息或密码有误!',
						type: 'error'
					});
				}
			});
		} catch (error) {
			toast.value.show({
				message: error.message || '登录失败，请稍后再试；',
				type: 'error'
			});
		};
	};
	let firstBackTime = 0;
	onMounted(async () => {
		// 初始化
		await nextTick();
		userInfo.keepPsw = uni.getStorageSync('keepPsw');
		uni.removeStorageSync("token");
		const tempUserInfo = uni.getStorageSync('userInfo');
		console.log('------------', tempUserInfo)
		if (userInfo.keepPsw && Object.keys(tempUserInfo).length > 0) {
			Object.keys(userInfo).forEach(key => {
				userInfo[key] = tempUserInfo[key]
			})
			// 自动登录
			onLogin();
		};
	});
	onBackPress(() => {
		console.log('App LastPageBackPress')
		if (firstBackTime == 0) {
			uni.showToast({
				title: '再按一次退出应用',
				position: 'bottom',
			})
			firstBackTime = Date.now()
			setTimeout(() => {
				firstBackTime = 0
			}, 2000)
			return true
		} else if (Date.now() - firstBackTime < 2000) {
			firstBackTime = Date.now()
			uni.exit()
		}
	});
</script>

<style lang="scss" scoped>
	.stext {
		padding-top: 15rpx;
	}

	.login-con {
		background-color: #FFF;
		height: 100vh;

		.login-logo {
			align-items: center;
			padding: 110px 0px 30px 0px;
			width: 100%;
			background-repeat: no-repeat;
			background-size: 90%;
			background-position: center bottom;

			.login-logo-top {
				height: 120rpx;
				width: 90%;
				font-weight: bolder;
				background-repeat: no-repeat;
				background-size: 90%;
				margin-bottom: 50rpx;
			}

			.logo {
				width: 100vw;
				height: 35vh;
				font-size: 26px;
				font-weight: bold;
			}
		}

		.login-form {}
	}

	.login-btn {
		position: absolute;
		width: 100%;
		bottom: 25px;

		.btn-con {
			padding: 0px 26px;
			margin-bottom: 30px;
		}
	}

	.login-form-item {
		border-radius: 5px;
		margin-bottom: 30rpx;
		// border: 1px solid #eee;
		padding: 4px 8px;
		background-color: rgba(25, 198, 173, 0.1);
	}

	.pdlr30 {
		padding-left: 30px;
		padding-right: 30px;
	}

	.pre-icon {
		width: 38px;
		height: 38px;
		background-color: rgba(25, 198, 173, 0.1);
		border-radius: 5px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 10px;
	}

	.psubtit {
		font-size: 46rpx;
	}

	.ptit {
		font-size: 44rpx;
	}
</style>
<style>
	.uni-easyinput__content-input {
		line-height: 45px !important;
		height: 45px !important;
		border-radius: 10px;
	}
</style>